import { useRef, forwardRef, useImperativeHandle } from "react";

// 子组件
const Input = forwardRef((props, ref) => {
  return <input ref={ref} />;
});
Input.displayName = "Input";

const Input2 = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  // 实现聚焦逻辑
  const focus = () => {
    inputRef.current.focus();
  };
  // 暴露函数给父组件调用
  useImperativeHandle(ref, () => ({
    focus,
    // 返回其他的东西
  }));
  return <input ref={inputRef} />;
});
Input2.displayName = "Input2";

export default function ForwardRef() {
  const inputRef = useRef(null);
  const inputRef2 = useRef(null);
  return (
    <>
      <div>
        <h2>forwardRef-场景说明（暴露元素）</h2>
        父组件：通过ref获取到子组件内部的input元素让其聚焦
        <br />
        <span style={{ color: "red" }}>
          {" "}
          默认情况下，不能直接通过useRef拿到子组件
        </span>
        <hr />
        <Input ref={inputRef} />
        <button
          onClick={() => {
            inputRef.current.focus();
          }}
        >
          使得子组件进行聚焦
        </button>
      </div>
      <div style={{ marginTop: 100 }}>
        <h2>useInperativeHandlle - 使用场景（暴露方法）</h2>
        父组件：通过ref调用子组件内部的focus方法实现聚焦
        <br />
        <Input2 ref={inputRef2} />
        <button
          onClick={() => {
            // 这里是子组件暴露出来的一些方法
            console.log(inputRef2.current.focus());
          }}
        >
          Click
        </button>
      </div>
    </>
  );
}
